export let name = "NationalDay-event-page";
export function Render(){
    return `
    <style>
    .national-day{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    }
    .marketing-activity {
      background-color: #fff;
      border-radius: 3rem 3rem 0 0  ; 
      padding: 3rem 1.5rem ; 
      height: 60%;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .title {
      font-size: 3rem; 
      color: #333;
      font-weight: bold;
      margin-bottom: 1rem; 
    }
    .activity-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tag {
      display: inline-block;
      padding: 1rem 1rem;
      background-color: #ffe5cc;
      color: #ff6600;
      font-size: 2rem; 
      border-radius: 1rem; 
      margin-right: 2rem; 
    }
    .desc {
      flex: 1;
      font-size:2rem; 
      color: #666;
      line-height: 1.4;
    }
    .arrow {
      font-size: 1rem; 
      color: #999;
    }
    .backGround{
    width: 100%;
    height: 40%;
    }
</style>

<!--    国庆页面-->
<div class="national-day" style="display: none">
    <div class="backGround"></div>
    <div class="marketing-activity">
      <h3 class="title">营销活动</h3>
      <div class="activity-item">
        <span class="tag">满赠</span>
        <p class="desc">消费满500元，赠送10元余额(条件：活动礼品共100份)</p>
        <i class="arrow">></i>
      </div>
    </div>

</div>


    `
}


export function afterRender(){
    //点击国庆弹出营销活动
    let activityBtn = document.querySelector(".activityBtn");
    let nationalDay = document.querySelector(".national-day");
    let backGround = document.querySelectorAll(".backGround");
    activityBtn.addEventListener("click", function () {
        nationalDay.style.display = "block";
    });
    backGround.forEach(function (item) {
        item.addEventListener("click", function () {
            let fatherDiv = item.parentElement;
            fatherDiv.style.display = "none";
        })
    })
}